<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        @submit.native.prevent
        :model="query"
        ref="queryForm"
        :inline="true"
        label-width="40px"
      >
        <el-form-item label="标题" prop="noticeTitle">
          <common-input v-model="query.noticeTitle" @enter="handleQuery" />
        </el-form-item>

        <el-form-item label="状态" prop="readStatus">
          <el-select v-model="query.readStatus">
            <el-option label="全部" :value="null"></el-option>
            <el-option label="未读" value="0"></el-option>
            <el-option label="已读" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="时间">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            @change="dateChange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </common-search>
    <el-row slot="tools" :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain @click="handleAllRead"
          >全部已读</el-button
        >
      </el-col>
    </el-row>

    <common-table v-loading="loading" :data="list" slot="content">
      <el-table-column
        label="标题"
        align="left"
        prop="noticeTitle"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.fileName && scope.row.fileName.length > 0"
            ><i class="el-icon-paperclip"></i></span
          >&nbsp;{{ scope.row.noticeTitle }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="left" prop="readStatus" width="90px">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.readStatus === '0'"
            >未读</el-tag
          >
          <el-tag type="success" v-if="scope.row.readStatus === '1'"
            >已读</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="时间"
        align="left"
        prop="updateTime"
        width="180px"
      >
        <template slot-scope="scope">
          {{ parseTime(new Date(scope.row.updateTime)) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80px">
        <template slot-scope="scope">
          <el-button type="text" @click="detail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </common-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="query.pageNum"
      :limit.sync="query.pageSize"
      @pagination="getList"
    />
    <notice-detail
      v-if="noticeDetailShow"
      @back="handleBack"
      :isPublicManage="false"
      :noticeId="noticeId"
    ></notice-detail>
  </common-list>
</template>

<script>
import { fetchPublicList, fetchAllRead } from "@/api/system/publicNotice";
import CommonList from "@/template/CommonList";
import { formatDate } from "@/utils";
import NoticeDetail from "../../notice/components/noticeDetail.vue";

export default {
  name: "mymsg",
  components: { CommonList, NoticeDetail },
  data() {
    return {
      noticeDetailShow: false,
      loading: true,
      query: {
        pageNum: 1,
        pageSize: 10,
        noticeTitle: null,
        readStatus: null,
      },
      list: [],
      date: [],
      total: 0,
      info: {
        noticeTitle: "",
        sysMsgContent: "",
        createTime: "",
      },
    };
  },

  methods: {
    handleBack() {
      this.noticeDetailShow = false;
      //获取通知个数
      // this.$bus.$emit("messageList");
      this.getList();
    },
    dateChange() {
      let endTime = null,
        beginTime = null;
      if (this.date && this.date.length > 0) {
        beginTime = this.date[0];
        endTime = this.date[1];
      }
      this.query.beginTime = beginTime || null;
      this.query.endTime = endTime || null;
    },

    handleQuery() {
      this.query.pageNum = 1;
      this.getList();
    },
    resetQuery() {
      this.date = [];
      this.query = this.$options.data().query;
    },

    getList() {
      this.loading = true;
      fetchPublicList(this.query)
        .then((res) => {
          if (res && (res.code === 200 || res.rescode === 200)) {
            this.list = res.data.rows;
            this.total = res.data.total;
          } else {
            this.list = [];
            this.total = 0;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleAllRead() {
      fetchAllRead().then((res) => {
        if (res && res.code === 200) {
          //获取通知个数
          // this.$bus.$emit("messageList");
          this.getList();
        }
      });
    },
    detail(info) {
      this.info = info;
      this.noticeId = info.noticeId;
      this.noticeDetailShow = true;
    },
  },
  mounted() {
    this.getList();

    //点击顶部铃铛 公告和全部 进入公告的tab页 刷新公告列表
    if (
      this.$route.query.currentTab === "1" ||
      this.$route.query.currentTab === "all"
    ) {
      this.$bus.$on("NOTICE_CLICK", this.getList);
    }
  },
  beforeDestroy() {
    this.$bus.$off("NOTICE_CLICK");
  },
};
</script>
<style scoped lang="scss"></style>
